<template>
  <div class="home">
    <template>
      <el-backtop></el-backtop>
    </template>
    <el-container>
      <el-header :class="isShowHeader ? 'bg-color' : ''">
        <div class="brand-logo"><span>菜鸟先飞</span></div>
        <el-button @click="qwe"> 1233 </el-button>
        <el-button @click="zzz"> 7777 </el-button>
        <div class="nav-menu">
          <div class="nav-menu-item" v-for="item in menuList" :key="item.id">
            <div><span :class="['iconfont', item.icon]"></span></div>
            <div>{{ item.name }}</div>
          </div>
          <div class="nav-menu-item">
            <div><span class="iconfont icon-gongju-"></span></div>
            <div>工具</div>
          </div>
          <div class="nav-menu-item">
            <div><span class="iconfont icon-diannao"></span></div>
            <div>后台</div>
          </div>
          <div class="nav-menu-item">
            <div><span class="iconfont icon-sousuo"></span></div>
            <div></div>
          </div>
        </div>
        <div class="git" :style="isShowHeader ? 'opacity: 1;' : ''">
          <el-tooltip
            v-show="isShowHeader"
            effect="dark"
            content="这里是git"
            placement="left"
          >
            <img src="../../assets/img/git.png" alt="" />
          </el-tooltip>
        </div>
      </el-header>
      <el-main>
        <!-- 路由占位符 -->
        <router-view
          @loaded="loaded"
          @switchArticles="switchArticles"
        ></router-view>
      </el-main>
      <el-footer class="bg-color">
        <div class="footer-info">
          <div class="f-info-text">
            <div>
              Copyright © 2020 - 2022 HeLingXu | Powered by Hexo | Theme Matery
            </div>
            <div>
              总访问量: {{ accessCount }} 次 | 总访问人数:
              {{ accessPeopleNumber }} 人
            </div>
            <div>
              闽ICP备20011318号-1 | 本站已勉强运行
              {{ this.timeData.diffYears }} 年 {{ this.timeData.diffDays }} 天
              {{ this.timeData.diffHours }} 小时
              {{ this.timeData.diffMinutes }} 分钟
              {{ this.timeData.diffSeconds }} 秒
            </div>
          </div>
          <div class="f-info-git">
            <div><span class="iconfont icon-github-fill"></span></div>
            <div><span class="iconfont icon-weixin"></span></div>
            <div><span class="iconfont icon-QQ"></span></div>
          </div>
        </div>
      </el-footer>
    </el-container>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="ddd">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import { accessCount } from '@/api/api'
export default {
  data() {
    return {
      //顶部菜单数据
      menuList: [
        {
          id: 1,
          icon: 'icon-home',
          name: '首页'
        },
        {
          id: 2,
          icon: 'icon-24gf-tags',
          name: '标签'
        },
        {
          id: 3,
          icon: 'icon-biaoqian',
          name: '分类'
        },
        {
          id: 4,
          icon: 'icon-guidang',
          name: '归档'
        },
        {
          id: 5,
          icon: 'icon-7',
          name: '关于'
        },
        {
          id: 6,
          icon: 'icon-24gf-bubble',
          name: '友情链接'
        }
      ],
      isShowHeader: false, //是否显示header背景和滚到git图标
      oldTop: 0, //记录位置
      dir: 1, //页面滚动的方向， 1  向下滚 ,   0  向上滚
      //底部时间
      timeData: {
        diffYears: 0,
        diffDays: 0,
        diffHours: 0,
        diffMinutes: 0,
        diffSeconds: 0
      },
      accessCount: 0, //总访问量
      accessPeopleNumber: 0, //总访问人数
      dialogVisible: false,
      tempFunc: '',
      ttt: function(){
        console.log(123)
      },
    }
  },
  mounted() {
    //底部统计
    this.getAccessCount()
    //底部计时
    this.startTime()
    //绑定滚动条监听
    window.addEventListener('scroll', this.handleScroll, true)
  },

  updated() {},
  methods: {
    //监听事件
    handleScroll() {
      let scrollTop =
        document.body.scrollTop || document.documentElement.scrollTop

      if (scrollTop < this.oldTop) {
        this.dir = 0
      } else {
        this.dir = 1
      }

      this.isShowHeader = scrollTop > 64;

      //更新位置
      this.oldTop = scrollTop

      this.setDir(this.dir)
    },
    //定时器，显示倒计时
    siteTime() {
      let seconds = 1000
      let minutes = seconds * 60
      let hours = minutes * 60
      let days = hours * 24
      let years = days * 365
      let today = new Date()
      let startYear = '2020'
      let startMonth = '7'
      let startDate = '1'
      let startHour = '0'
      let startMinute = '0'
      let startSecond = '0'
      let todayYear = today.getFullYear()
      let todayMonth = today.getMonth() + 1
      let todayDate = today.getDate()
      let todayHour = today.getHours()
      let todayMinute = today.getMinutes()
      let todaySecond = today.getSeconds()
      let t1 = Date.UTC(startYear, startMonth, startDate, startHour, startMinute, startSecond)
      let t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond)
      let diff = t2 - t1

      this.timeData.diffYears = Math.floor(diff / years)
      this.timeData.diffDays = Math.floor(
        diff / days - this.timeData.diffYears * 365
      )
      this.timeData.diffHours = Math.floor(
        (diff -
          (this.timeData.diffYears * 365 + this.timeData.diffDays) * days) /
          hours
      )
      this.timeData.diffMinutes = Math.floor(
        (diff -
          (this.timeData.diffYears * 365 + this.timeData.diffDays) * days -
          this.timeData.diffHours * hours) /
          minutes
      )
      this.timeData.diffSeconds = Math.floor(
        (diff -
          (this.timeData.diffYears * 365 + this.timeData.diffDays) * days -
          this.timeData.diffHours * hours -
          this.timeData.diffMinutes * minutes) /
          seconds
      )
    },
    //启动时间
    startTime() {
      const interval = setInterval(this.siteTime, 1000)
    },
    //获取浏览量数据
    getAccessCount() {
      accessCount()
        .then((res) => {
          this.accessCount = res.accessCount
          this.accessPeopleNumber = res.accessPeopleNumber
        })
        .catch((err) => {
          console.log('xy------', err)
        })
    },
    //首页加载完毕
    loaded(e) {},
    //切换文章完毕
    switchArticles(e) {},
    async zzz(){
      console.log('1')
      console.log('2')
      console.log('3')
      await this.showAlertAsync()
      console.log('4')
      console.log('5')
      console.log('6')
      console.log('7')

    },
    qwe(){
      console.log('123')
      this.dialogVisible = true
    },
    ddd(){
      console.log('6666')
      this.dialogVisible = false

      this.tempFunc()

      this.ttt()
    },
    showAlertAsync(){
      return new Promise(resolve => {
        console.log('6666')
        this.dialogVisible = true
        this.tempFunc = resolve
      })
    },
  },
  beforeDestroy() {
    //移除监听事件
    window.removeEventListener('scroll', this.handleScroll, true)
  },
  computed: {}
}
</script>

<style lang="less" scoped>
@import '../../style/home/home.less';
</style>
